<template>
  <section class="q-mt-md">
    <h2 v-if="!titleHidden" class="q-mb-lg title size-24" :class="{'text-center': $q.screen.gt.md}">{{ title }}</h2>
    <div
      class="comment-boxes-top row justify-between items-center q-mb-sm q-pb-xs border-bottom-1"
    >
      <div class="row items-center">
        <slot></slot>
        <div v-if="!$slots.default" class="text-grey-6 size-14">{{ count }} {{ title }}</div>
      </div>
      <div class="row items-center">
        <div v-if="$slots.default" class="q-mr-xs text-grey-6 size-14">{{ count }} {{ title }}</div>
        <q-btn class="button-tag" :label="'我要'+title" dense color="primary" flat @click="scrollToCommentInput"></q-btn>
        <!--<q-btn-dropdown rounded text-color="primary" label="顺序查看">-->
          <!--&lt;!&ndash; dropdown content &ndash;&gt;-->
          <!--<q-list link class="text-grey-8">-->
            <!--<q-item class="size-14">顺序查看</q-item>-->
            <!--<q-item class="size-14">倒叙查看</q-item>-->
          <!--</q-list>-->
        <!--</q-btn-dropdown>-->
      </div>
    </div>
    <q-list separator no-border>
      <a-comment-box
        v-for="(comment, index) in querySet"
        :key="index"
        :index="comment.id"
        :map="map"
        :comment="comment"
        @reply="submitComment($event, index)"></a-comment-box>
    </q-list>
    <div v-if="querySet && querySet.length === 0" class="text-center text-grey-6">
      目前还没有评论，点评一下吧！
    </div>
    <a-pagination :page="page" :max="max" type="cpage"></a-pagination>
    <div v-if="auth">
      <a-editor ref="editor" v-model="content"></a-editor>
      <!--<a-text-input-->
      <!--ref="commentInput"-->
      <!--:title="title"-->
      <!--:loading="loading"-->
      <!--placeholder="说点什么吧..."-->
      <!--class="q-my-md"-->
      <!--:close-button="false"-->
      <!--@submit="submitComment({content:$event})"></a-text-input>-->
      <div class="text-right q-mt-md">
        <q-btn color="primary" :disabled="!content || loading" :label="title" @click="submitComment({content: content})"></q-btn>
      </div>
    </div>
    <div v-else class="flex flex-center border-1-eee q-py-xl">
      <a href="/login/"><q-btn color="primary" :label="'登录'+title"></q-btn></a>
    </div>
  </section>
</template>

<script>
  import { maxPageMixin } from '../mixins'
  import { scrollToElement } from '../utils/element'
  // import AEditor from './editor'

  export default {
    name: 'aCommentBoxes',
    components: {
      AEditor: function (resolve) {
        require(['./editor'], resolve)
      }
    },
    mixins: [maxPageMixin],
    props: {
      title: {
        type: String,
        required: false
      },
      titleHidden: {
        type: Boolean,
        required: false,
        default: false
      },
      id: {
        type: [String, Number],
        required: true
      },
      map: {
        type: Object,
        required: false
      },
      type: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        querySet: null,
        infinite: !this.$q.platform.has.touch,
        count: 0,
        limit: 10,
        loading: false,
        content: '',
        page: null
      }
    },
    created () {
      this.getPage()
    },
    computed: {
      max () {
        return Math.ceil(this.count / (this.limit))
      },
      cPage () {
        return this.$route.query.cpage || 1
      }
    },
    watch: {
      page (page, old) {
        // this.$router.push({path: this.$route.path, query: { cpage: page }})
        this.getComments()
        if (old) {
          this.scrollToTop()
        }
      },
      cPage (cPage) {
        this.page = cPage
      }
    },
    methods: {
      getComments () {
         this.getQuerySet({
          api: '/api/{type}/{id}/comments/',
          id: this.id,
          type: this.type,
          page: this.page,
          limit: this.limit
        })
      },
      getPage () {
        const cpage = this.$route.query.cpage
        this.page = cpage ? parseInt(cpage) : 1
      },
      async submitComment (event, index) {
        if (this.loading) {
          return
        }

        const { content, parentId } = event

        if (parentId) {
          const parent = this.querySet[index]
          this.$set(parent, 'loading', true)
        }

        const { status, data } = await this.postRequest({
          api: '/api/{type}/{id}/comment/',
          id: this.id,
          type: this.type,
          data: {
            parent: parentId,
            content
          }
        })

        if (status !== 200) {
          this.notify('error', '添加评论时发生错误，请稍后重试')
        }

        if (parentId) {
          this.$set(parent, 'loading', false)
          const comment = data
          comment.parent = this.querySet[index]
          this.querySet.splice(index + 1, 0, comment)
          this.$root.$emit('toggleReplyInput', false)
        } else {
          this.querySet.push(data)
          this.content = ''
        }

        // this.$q.notify({
        //   type: 'positive',
        //   message: ''
        // })
      },
      scrollToTop () {
        const el = this.$el.querySelector('.comment-boxes-top')
        scrollToElement(el)
      },
      scrollToCommentInput () {
        const inputComponent = this.$refs.editor
        scrollToElement(inputComponent.$el)
        inputComponent.focus()
      }
    }
    }
</script>

<style lang="stylus">
</style>
